import { useDrag } from "react-dnd"//提供拖拽功能
export interface MaterialItemProps {
    name: string
}
export default function MaterialItem(props: MaterialItemProps) {
    const [_, dragRef] = useDrag(() => ({//dragRef表示拖拽引用，绑定到DOM元素上使其成为拖拽目标
        //表示拖拽类型表示符，确保不同物料项有不同的拖拽类型，作用是：可将其引入父容器中，明确父容器可盛放该组件
        type: props.name,
        item: { //被拖动的类型信息，父容器可通过monitor.getItem()获取此对象，用于处理拖拽逻辑
            type: props.name
        }
    }))
    return (
        <div
            ref={dragRef as any}
            className=' 
            border-dashed 
            border-[1px] 
            border-[#000] 
            py-[8px] px-[10px] 
            inline-block 
            bg-white
            m-[10px]
            cursor-pointer
             hover:bg-[#ccc]
            '
            key={props.name}>
            {props.name}
        </div>
    )
}
